<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加轮播图</title>
    <link rel="stylesheet" type="text/css" href="../../layui/css/layui.css">

    <link rel="stylesheet" href="../../../css/carouselCss/addCarouselcss/addCarousel.css">

</head>
<body>

<div id="topbox">
<!--    <img src="../../img/topimg.png" width="20px" height="20px">-->
    <div id="toptext">
        <span>添加轮播图</span>
    </div>

<!--    <div id="topbut">-->
<!--        <button id="refresh" type="button" class="layui-btn layui-btn-xs" >刷新</button>-->
<!--        <button id="back" type="button" class="layui-btn layui-btn-xs">返回</button>-->
<!--    </div>-->
</div>

<form class="layui-form" action="javascript:;"  >

    <div class="layui-form-item">
        <label class="layui-form-label">图片标题:</label>
        <div class="layui-input-block">
            <input type="text" name="imgTitle" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" width="200px">
        </div>
    </div>

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label">上线/下线:</label>-->
<!--        <div class="layui-input-block">-->
<!--            <input type="radio" name="display" value="2" title="上线" checked>-->
<!--            <input type="radio" name="display" value="3" title="下线" >-->
<!--        </div>-->
<!--    </div>-->

<!--    <div class="layui-form-item">-->
<!--        <label class="layui-form-label" placeholder="请选择轮播图类型">轮播图类型:</label>-->
<!--        <div class="layui-input-inline">-->
<!--            <select name="imgType" lay-verify="required">-->
<!--                <option value=""></option>-->
<!--                <option value="图片">图片</option>-->
<!--                <option value="视频">视频</option>-->
<!--            </select>-->
<!--        </div>-->
<!--    </div>-->

    <div class="layui-form-item">
        <label class="layui-form-label required">开始时间:</label>
        <div class="layui-input-block">
            <input type="text" name="startDate" class="layui-input" id="ks"></td>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">结束时间:</label>
        <div class="layui-input-block">
            <input type="text" name="endDate" class="layui-input" id="js"></td>
        </div>
    </div>

    <!-- 图片上传 -->
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图片:</label>
        <div class="layui-input-block">
            <!-- 上传按钮 -->
            <button type="button" class="layui-btn" id="upload1">
                上传图片
            </button>
            <!-- 隐藏的input -->
            <div>
                <label class="layui-form-label required" style="margin-left: -110px">预览图:</label>
                <input type="hidden" id="pic" name="carouselImg"th:value="${obj?.pic}"/>

            </div>

            <!-- 预览区域 -->
            <div id="imgDiv" class="layui-upload-list" style="display: none;">
                <img class="layui-upload-img" width="100px" height="80px" id="demo1" name="msg"/>
                <p id="demoText"></p>
            </div>
        </div>
    </div>




    <div class="layui-form-item">
        <label class="layui-form-label">课程视频：</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" id="test2">上传视频</button>
            <input type="hidden" name="carouselVideo">
            <input type="hidden" name="carouselUrl">
            <video style="width: 500px;height: 200px" controls id="carouselVideo"></video>
        </div>
    </div>


    <!-- 视频上传 -->
    <!--    <div class="layui-form-item">-->
    <!--        <label for="L_email" class="layui-form-label">-->
    <!--            <span class="x-red">*</span>上传视频</label>-->

    <!--        <button type="button" class="layui-btn" id="test1">-->
    <!--            <i class="layui-icon">&#xe67c;</i>上传视频-->
    <!--        </button>-->
    <!--        <div class="layui-upload-drag" id="fileUpload">-->
    <!--            <i class="layui-icon"></i>-->
    <!--            <p>点击上传，或将文件拖拽到此处</p>-->
    <!--            <div class="layui-hide" id="uploadDemoView">-->
    <!--                <hr>-->
    <!--                <input type="hidden" id="videoPath" name="videoPath" required="" lay-verify="required">-->
    <!--                <img src="" alt="上传成功后渲染" style="max-width: 196px">-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->

    <!-- 视频上传后在线预览 -->
    <!--    <div class="layui-form-item">-->
    <!--        <label for="L_email" class="layui-form-label">-->
    <!--            <span class="x-red">*</span>视频</label>-->
    <!--        <div class="layui-input-inline">-->
    <!--            <video width="320" height="240" controls>-->
    <!--                //视频格式1，MP4格式对视频文件要求较高，一般的MP4格式的视频文件也不一定可播放成功-->
    <!--                <#&#45;&#45;                        <source src="movie.mp4" type="video/mp4">&ndash;&gt;-->
    <!--                <#&#45;&#45;                        <source src="movie.ogg" type="video/ogg">&ndash;&gt;-->
    <!--                //此格式可成功播放MP4格式的视频-->
    <!--                <source src="/image/${video.videoPath!}" type="video/webm">-->
    <!--            </video>-->
    <!--        </div>-->
    <!--    </div>-->

    <div class="layui-form-item layui-form-text" style="width: 410px">
        <label class="layui-form-label">内容备注</label>
        <div class="layui-input-block">
            <textarea name="remarks" placeholder="请输入标签" class="layui-textarea"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>




<script src="../../layui/jquery-3.6.0.js"></script>
<script src="../../layui/layui.js"></script>


<script src="../../js/carouselJs/addCarouselJs/addcarousel.js"></script>
</body>
</html>